<template>
  <div id="tier"></div>
</template>
<script>
export default {
  name: 'edit',
  data () {
    return {}
  },
  mounted () {
    this.tierChart()
  },
  methods: {
    tierChart () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('tier'))
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['拔舌', '剪刀', '铁树', '孽镜', '蒸笼', '铜柱', '刀山', '冰山', '油锅', '牛坑', '石压', '舂臼', '血池', '枉死', '磔刑', '火山', '石磨', '刀锯']
        },
        series: [
          {
            name: '十八地狱',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '拔舌' },
              { value: 310, name: '剪刀' },
              { value: 234, name: '铁树' },
              { value: 135, name: '孽镜' },
              { value: 158, name: '铜柱' },
              { value: 158, name: '刀山' },
              { value: 1548, name: '冰山' },
              { value: 158, name: '油锅' },
              { value: 1548, name: '牛坑' },
              { value: 158, name: '石压' },
              { value: 1548, name: '舂臼' },
              { value: 148, name: '血池' },
              { value: 1548, name: '枉死' },
              { value: 1548, name: '磔刑' },
              { value: 158, name: '火山' },
              { value: 1548, name: '石磨' },
              { value: 154, name: '刀锯' }
            ]
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
#tier {
  width: 100%;
  height: 300px;
}
</style>
